<script setup lang="ts">
import { reactive, ref } from 'vue'
import FsButton from './components/button'
import FsInput from './components/input'
import FsStatus from './components/status'
import FsAccordion from './components/accordion'
import FsPagination from './components/pagination'
import FsSelect from './components/select'
import { FsCheckbox, FsCheckboxGroup } from './components/checkbox'
import lodash from 'lodash'
import { AccordionItem } from './components/accordion/accordion-types'
import { useMutationObserver, useResizeObserver } from './components/shared/hooks/useObserver'

const demoText = ref('')
const demoBool = ref(true)
const demoBool2 = ref(true)
const demoArray = ref<Array<string>>(['1'])
const halfChecked = ref(false)
const ref1 = ref()
const accordionData = reactive<AccordionItem[]>([
  {
    label: '首页',
    value: '/',
    disabled: false
  },
  {
    label: '关于我们',
    value: '/about',
    disabled: false
  },
  {
    label: '产品中心',
    value: '/product',
    disabled: false,
    children: [
      {
        label: '产品1',
        value: '/product/1',
        disabled: false
      },
      {
        label: '产品2',
        value: '/product/2',
        disabled: false
      }
    ]
  },
  {
    label: '示例',
    value: '/example',
    disabled: false,
    children: [
      {
        label: '示例-1',
        value: '/example/1',
        disabled: false
      },
      {
        label: '示例-2',
        value: '/example/2',
        disabled: false,
        children: [
          {
            label: '示例-2-1',
            value: '/example/2/1',
            disabled: true
          },
          {
            label: '示例-2-2',
            value: '/example/2/2',
            disabled: false
          }
        ]
      }
    ]
  }
])

const clickHandle = (e: any) => {
  console.log('clickHandle', e)
}
const changeHandle = () => {
  console.log('changeHandle')
}
const changeOnceHandle = (a: Array<string>) => {
  const checkList = Object.entries(a).map(([_, v]) => {
    return v
  })
  if (checkList.length === 2) {
    halfChecked.value = false
    demoBool.value = true
  } else if (checkList.length === 0) {
    halfChecked.value = false
    demoBool.value = false
  } else if (lodash.isEqual(demoArray.value, checkList)) {
    halfChecked.value = true
  } else {
    halfChecked.value = false
  }
  console.log('changeHandle', a)
}
const selectAllHandle = (e: Event) => {
  if ((e.target as HTMLInputElement).checked) {
    demoArray.value = ['1', '2']
  } else {
    demoArray.value = []
  }
  console.log('selectAllHandle')
}
const getNodeInfo = () => {
  console.log(ref1.value.$el)
  // getNodePosition(ref1.value.$el)
  // useMutationObserver([ref1.value.$el], () => {
  //   getNodePosition(ref1.value.$el)
  // })
  useResizeObserver([ref1.value.$el], () => {
    getNodePosition(ref1.value.$el)
  })
}
const getNodePosition = (vNode: HTMLElement) => {
  const rect = vNode.getBoundingClientRect()
  console.log(rect)
}
</script>

<template>
  <div class="container">
    <FsSelect />
    <FsButton @click="getNodeInfo">获取元素位置</FsButton>

    <div v-fs-ripple class="demoClass">{{ demoText }}</div>
    <FsButton @click="clickHandle">发发发</FsButton>
    <FsButton v-fs-ripple @click="clickHandle">看看看看看看</FsButton>
    <FsInput v-model="demoText"></FsInput>
    <FsStatus type="success">什么鬼</FsStatus>
    <FsStatus type="error">什么鬼</FsStatus>
    <FsStatus type="warning">什么鬼</FsStatus>
    <FsStatus type="info">什么鬼</FsStatus>
    <div>{{ demoArray }} {{ halfChecked }} {{ demoBool }}
      <FsCheckbox label="全选" v-model="demoBool" :halfChecked="halfChecked" @change="selectAllHandle"></FsCheckbox>
      <FsCheckboxGroup v-model="demoArray" @change="changeOnceHandle">
        <FsCheckbox label="发发发" value="1"></FsCheckbox>
        <FsCheckbox label="是是是" value="2"></FsCheckbox>
      </FsCheckboxGroup>
    </div>
    <div>{{ demoBool2 }}
      <FsCheckbox label="你你你" value="3" v-model="demoBool2" @change="changeHandle"></FsCheckbox>
    </div>
    <div class="fs-full-screen">
      <div class="demo2Class">
        <FsButton @click="clickHandle">发发发</FsButton>
        <FsButton v-fs-ripple @click="clickHandle">看看看看看看</FsButton>
        <FsButton v-fs-full-screen-toggle type="success">全屏</FsButton>
      </div>
    </div>

    <FsPagination :total="343" :listSize="20"></FsPagination>
    <FsPagination :total="243" :listSize="10"></FsPagination>
    <FsAccordion ref="ref1" :data="accordionData" @click="clickHandle"></FsAccordion>
  </div>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}

.demoClass {
  width: 300px;
  height: 120px;
  background: #eee;
}

.demo2Class {
  width: 300px;
  height: 120px;
  background: #ff9;
}
</style>
./components/shared/hooks/useObserver